# サイドバー / PDF パネルの折りたたみ対応と巨大 PDF ガード#294
Merged
Merged
Conversation
|
Warning Review limit reached
More reviews will be available in 43 minutes and 3 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (6)
📝 WalkthroughWalkthroughThis PR adds collapsible sidebar and PDF panel features to the authenticated app layout and career resume form, enforces a 20MB file size limit for resume uploads, and refines responsive layout spacing. The changes include state management, conditional UI rendering, CSS animations, localized accessibility labels, and validation logic. ChangesCollapsible UI & Resume Validation
Sequence Diagram(s)sequenceDiagram
participant User
participant AuthenticatedLayout
participant CSS as App.module.css
User->>AuthenticatedLayout: Click collapse button
AuthenticatedLayout->>AuthenticatedLayout: sidebarCollapsed = true
AuthenticatedLayout->>CSS: Apply .sidebarCollapsed modifier
CSS->>CSS: Slide sidebar out via transform
CSS->>CSS: Expand mainContent width
Note over CSS: Smooth transition: margin-left animation
User->>AuthenticatedLayout: Click re-open button
AuthenticatedLayout->>AuthenticatedLayout: sidebarCollapsed = false
AuthenticatedLayout->>CSS: Remove .sidebarCollapsed modifier
CSS->>CSS: Slide sidebar back in, restore layout
sequenceDiagram
participant User
participant CareerResumeForm
participant useResumeImportAssist
User->>CareerResumeForm: Select resume file
CareerResumeForm->>useResumeImportAssist: handleFileChange(file)
useResumeImportAssist->>useResumeImportAssist: Check file.size >= MAX_FILE_BYTES
alt File too large
useResumeImportAssist->>useResumeImportAssist: error = TOO_LARGE(20)
useResumeImportAssist-->>User: Display error message
else File acceptable
useResumeImportAssist->>useResumeImportAssist: Parse file, update state
useResumeImportAssist-->>User: Show parsed trace
end
sequenceDiagram
participant User
participant CareerResumeForm
participant CSS as CareerResumeForm.module.css
User->>CareerResumeForm: Click PDF toggle button
CareerResumeForm->>CareerResumeForm: pdfCollapsed = true
CareerResumeForm->>CSS: Apply .pdfColCollapsed class
Note over CareerResumeForm: Hide ResumePdfTracePanel & splitter
CSS->>CSS: Render vertical rail with rotated text
Note over CSS: Form expands to full width
User->>CareerResumeForm: Click toggle again
CareerResumeForm->>CareerResumeForm: pdfCollapsed = false
CareerResumeForm->>CSS: Remove .pdfColCollapsed class
Note over CareerResumeForm: Show ResumePdfTracePanel & splitter
CSS->>CSS: Restore side-by-side layout
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
frontend/src/hooks/career/useResumeImportAssist.test.ts (1)
41-52: ⚡ Quick winAdd regression test for oversize selection after an existing valid file
Current case covers only initial empty state. Add a second flow: select valid PDF first, then oversize PDF, and assert
file/fileNameare cleared.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/hooks/career/useResumeImportAssist.test.ts` around lines 41 - 52, Add a regression test that covers selecting a valid PDF first and then an oversize PDF to ensure the hook clears previous selection; in the test file for useResumeImportAssist, after rendering the hook and simulating a valid File selection via result.current.handleFileChange(makeChangeEvent(validPdf)), assert result.current.file and fileName are set, then simulate the huge file selection (as in existing test using Object.defineProperty on size) and assert result.current.file and fileName are cleared (null) and result.current.error equals IMPORT_ASSIST_MESSAGES.TOO_LARGE(20); reference the hook useResumeImportAssist, the handler handleFileChange, the helper makeChangeEvent, and the message IMPORT_ASSIST_MESSAGES.TOO_LARGE to locate where to add this second flow.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/App.module.css`:
- Around line 57-59: The collapsed sidebar (.sidebarCollapsed .sidebar) is only
visually hidden but remains keyboard-focusable; update the collapse handling to
make the sidebar non-interactive when hidden by adding non-focusable and
non-pointer rules (e.g., set visibility:hidden and pointer-events:none or
display:none) and/or set aria-hidden="true" (or apply the inert attribute) on
the sidebar container when .sidebarCollapsed is active so its interactive
descendants are removed from the tab order and cannot receive pointer events.
In `@frontend/src/components/forms/CareerResumeForm.tsx`:
- Around line 247-271: The collapsed PDF column currently prevents
ResumePdfTracePanel from rendering when pdfCollapsed is true, which hides assist
errors (assist.error); update the component so assist errors remain surfaced
even when pdfCollapsed is true — e.g., render a lightweight error
indicator/button next to the pdf toggle or always render a minimal
ResumePdfTracePanelErrorView (referencing pdfCollapsed, ResumePdfTracePanel,
assist.error, setPdfCollapsed and UI_MESSAGES.PDF_PANEL_COLLAPSE/EXPAND) so
parse/oversize errors are visible and can toggle the full panel.
In `@frontend/src/hooks/career/useResumeImportAssist.ts`:
- Around line 97-100: The oversize-file early-return in the block that checks
"if (selected.size > MAX_FILE_BYTES)" only calls setError and returns, leaving
previous file state (file and fileName) stale; update that branch to also clear
the selected file state by calling setFile(null) and setFileName('') (or
appropriate empty values) before returning so the stale PDF is not shown,
keeping the error message from IMPORT_ASSIST_MESSAGES.TOO_LARGE(MAX_FILE_MB).
---
Nitpick comments:
In `@frontend/src/hooks/career/useResumeImportAssist.test.ts`:
- Around line 41-52: Add a regression test that covers selecting a valid PDF
first and then an oversize PDF to ensure the hook clears previous selection; in
the test file for useResumeImportAssist, after rendering the hook and simulating
a valid File selection via
result.current.handleFileChange(makeChangeEvent(validPdf)), assert
result.current.file and fileName are set, then simulate the huge file selection
(as in existing test using Object.defineProperty on size) and assert
result.current.file and fileName are cleared (null) and result.current.error
equals IMPORT_ASSIST_MESSAGES.TOO_LARGE(20); reference the hook
useResumeImportAssist, the handler handleFileChange, the helper makeChangeEvent,
and the message IMPORT_ASSIST_MESSAGES.TOO_LARGE to locate where to add this
second flow.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 8515331f-838f-4d84-8776-ff072d4ef65e
📒 Files selected for processing (8)
frontend/src/App.module.cssfrontend/src/components/AuthenticatedLayout.tsxfrontend/src/components/forms/CareerResumeForm.module.cssfrontend/src/components/forms/CareerResumeForm.tsxfrontend/src/constants/messages.tsfrontend/src/hooks/career/useResumeImportAssist.test.tsfrontend/src/hooks/career/useResumeImportAssist.tsfrontend/src/styles/shared.module.css
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
概要
職務経歴書編集まわりの画面で表示領域を広く使えるよう、サイドバーと**PDF 原本ビュー（右カラム）**をそれぞれ折りたたみ可能にした。あわせて、PDF 取り込み補助でブラウザのフリーズ / OOM を招く巨大ファイルを描画前に弾くガードを追加した。
対象コミット:
284350eサイドバー折り畳み93e0881heavy PDF guardfrontend のみの変更（backend / infra への影響なし）。
変更内容
1. サイドバーの折りたたみ（
284350e）AuthenticatedLayoutにsidebarCollapsed状態を追加。ヘッダー右端の «（閉じる）ボタンでサイドバーを画面外へスライドし、本文領域を全幅に広げる。sidebarHeaderを新設し、PC / モバイル両レイアウトに対応（モバイルではトップバー化したサイドバーでも折りたたみ可能）。transform/margin-left）でスライドを滑らかに。2. PDF 原本ビューの折りたたみ（
284350e）CareerResumeFormにpdfCollapsed状態を追加。右カラムを細い縦レール（pdfColCollapsed）に畳み、入力フォームを全幅に広げる。ResumePdfTracePanelを非レンダリングにし、トグルボタンのみ表示。writing-mode: vertical-rl）に、縦積みレイアウト（狭幅）では全幅の薄いバー + 横書きに切り替え。aria-expanded/aria-labelでアクセシビリティ対応。3. 巨大 PDF のガード（
93e0881）useResumeImportAssistに最大ファイルサイズ 20MB のガード（MAX_FILE_BYTES）を追加。超過時はfileを保持せずエラー表示して描画前に弾く。PdfDocumentViewの全ページ一括レンダリングでブラウザがフリーズ / OOM するのを防ぐこと。職務経歴書 PDF は通常数 MB のため、明らかに異常な巨大ファイルだけを弾く緩めの閾値。4. レスポンシブ微調整（
93e0881）shared.module.cssで狭幅時のセクション余白 / フォーム gap を詰め、入力欄の表示幅を確保。メッセージ管理
ハードコードを避けるルールに従い、新規 UI 文言は SSoT に集約:
UI_MESSAGES.SIDEBAR_COLLAPSE/SIDEBAR_EXPAND/PDF_PANEL_COLLAPSE/PDF_PANEL_EXPANDIMPORT_ASSIST_MESSAGES.TOO_LARGE(limitMb)（動的パラメータ対応の関数形式）テスト
useResumeImportAssist.test.tsに「20MB 超の巨大ファイルは弾いてエラーを出す（fileは保持しない）」ケースを追加。実バイト列は確保せずsizeのみ巨大に見せて描画ガードを検証。影響範囲 / 変更ファイル
8 files changed, 225 insertions(+), 16 deletions(-)
確認事項（レビュー観点）
Summary by CodeRabbit
New Features
Improvements